<template>
	<view>
		<u-toast ref="uToast" />
		<u-sticky>
			<div class="screen_div1">
				<view class="screen_div">
					<u-search placeholder="请输入客户姓名/车牌号码/手机号码" v-model="value2" @search='searchVal' @custom="customVal"
						:show-action="false"></u-search>

					<rowMenu :localdata="options4" @change="menuAction($event)" class="g-title-sx" :value="value4">
						<image :src="`/static/jeesite/${showSX?'shaixuan1':'shaixuan'}.png`" mode="" class="g-title-sx1"
							@click="showSX = !showSX" />

					</rowMenu>

				</view>
			</div>


			<!-- <u-dropdown ref="uDropdown" @open="open" @close="close" class="dropdownFn" v-if="showSX">
				<u-dropdown-item v-model="value4" :title="stateTitle4" :options="options4"
					@change="changeDro4"></u-dropdown-item>
			</u-dropdown> -->




		</u-sticky>
		<view v-if="show">
			<view class="page">

				<u-swipe-action>
					<view class="plateN" v-for="(item,i) in list" :key="i">
						<u-swipe-action-item  style="width: 750rpx;position: relative;"
							@click.stop="actionItem(item.clueId)">
							<div style="width: 100%;position: relative;" @click.stop="detItem(item)">



								<view class="" style="display: flex;">
									<view class="bg-purple" style="background-color: #fe8a85;">
										<img src="/static/jeesite/tabbar/che.png" class='bg-purple-i' alt="" srcset="">
									</view>
									<view class="bg-purple-light">
										<view class="" style="font-weight: bold;">
											{{item.reportPerson}} -- {{item.carId}}
										</view>
										<view class="" style="color: #ccc; font-size: 28rpx;">
											{{item.phone}}
										</view>

										<view style="color: #ccc; font-size: 28rpx;">
											跟踪人： <span style="color: #2d8cf0;">{{item.companyName}} -
												{{item.trackPersonName}}</span>
										</view>
									</view>
								</view>
								<view class="plateN-r">

									<img src="/static/jeesite/tabbar/xiansuo.png" class='bg-purple-ii'
										v-if="item.isShow == 1" @click.stop="detailsClue(item)">


									<img src="/static/jeesite/tabbar/dianhua.png" class='bg-purple-ii'
										@click.stop="callPhone(item.phone)">


									<img src="/static/jeesite/tabbar/zuofei.png" class='bg-purple-ii3' mode=""
										v-if="titleName == '再次跟踪中'" @click.stop="orderItem1(item.clueId)">
									<!-- <img src="/static/jeesite/tabbar/gongdan.png" class='bg-purple-ii3' mode=""
								v-if="item.clueStatusName != '已转工单' && (titleName == '跟踪中' || titleName == '再次跟踪中') "
								@click.stop="orderItem(item.clueId)"> -->
									<img src="/static/jeesite/tabbar/chakan.png" class='bg-purple-ii2' mode=""
										@click.stop="detailsItem(item.clueId)">
									<img src="/static/jeesite/tabbar/Rrl_s_138.png" class='bg-purple-ii' mode="">
								</view>
							</div>
						</u-swipe-action-item>

					</view>




				</u-swipe-action>



			</view>


		</view>
		<view v-else>
			<u-empty mode="search" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</view>
		<u-modal :show="show1" title="转工单" content='确定转工单吗?' @confirm="confirm1" @cancel="show1 = false"
			showCancelButton></u-modal>
		<u-modal :show="show2" title="转战败" content='确定转战败吗?' @confirm="confirm2" @cancel="show2 = false"
			showCancelButton>

			<view class="slot-content">
				<u-form>
					<u-form-item label="备注" required>
						<!-- <u--textarea v-model="remarks"  border="surround" count  autoHeight /> -->

						<u-radio-group v-model="remarks" placement="column">
							<u-radio :customStyle="{marginBottom: '14rpx'}" v-for="(item, index) in checkboxList1"
								:key="index" :label="item.name" :name="item.name">
							</u-radio>
						</u-radio-group>
					</u-form-item>
				</u-form>

			</view>
		</u-modal>




	</view>

</template>

<script>
	import store from '@/store/index.js';
	import rowMenu from '@/pagesA/common/rowMenu.vue';
	export default {
		components: {
			rowMenu,

		},
		data() {
			return {
				showSX: false,

				current: '',
				current1: '',
				list: [],
				show: true,
				show1: false,
				show2: false,
				titleName: '',
				remarks: '',
				checkboxList1: [{
					name: '其它4S店'
				}, {
					name: '修理厂'
				}, {
					name: '外省出险'
				}, {
					name: '销案'
				}, {
					name: '不修'
				}, {
					name: '报废'
				}, {
					name: '其他'
				}],

				value2: '',
				options4: [{
					text: '全部',
					value: 3
				}, {
					text: '最近一周',
					value: 0
				}, {
					text: '最近一个月',
					value: 1
				}, {
					text: '最近三个月',
					value: 2
				}, ],

				stateTitle4: '时间筛选',
				value4: 0,
				options1: [{
					text: '删除'
				}]

			}
		},
		onShow() {
			var that = this

		},
		onLoad(option) {
			var that = this
			this.titleName = option.name
			wx.setNavigationBarTitle({
				title: option.name
			})
			that.getListData()

		},

		methods: {

			menuAction(action, rowId) {
				// 忽略初始化时的传入的空操作
				if (action === '') {
					return
				}

				this.value4 = action


				this.getListData()
			},


			actionItem(clueId) {
				var that = this
				that.$request('deleteClue', {
					clueId,
				}, 'get').then(res2 => {
					if (res2.code == 200) {
						uni.$u.toast(`${res2.message}`)
						this.getListData()

					} else {
						that.$refs.uToast.error(`${res2.message}`)
					}


					uni.hideLoading();

				})
			},


			//搜索
			searchVal(e) {
				this.getListData()
			},
			customVal(e) {
				this.getListData()

			},

			open(index) {
				this.$refs.uDropdown.highlight();
			},
			close(index) {
				this.$refs.uDropdown.highlight(index);
			},

			//点击
			detItem(e) {
				// if (this.titleName =  == '战败' || this.titleName == '已转工单') {
				// 	return false
				// }

				e.titleNameNum = this.titleName


				uni.navigateTo({
					url: '/pagesA/index/trackList?name=' + JSON.stringify(e)

				})
			},



			detailsClue(item) {
				/* JSON.stringify(item) */
				uni.navigateTo({
					url: '/pagesA/index/detailsClue?list=' + JSON.stringify(item)

				})
			},
			detailsItem(e) {
				uni.navigateTo({
					url: '/pagesA/index/details?name=' + e

				})
			},
			orderItem(e) {
				this.current = e
				this.show1 = true

			},
			orderItem1(e) {
				this.current1 = e
				this.show2 = true

			},
			//转工单
			confirm1(e) {
				var that = this
				uni.showLoading({
					title: '加载中',
					mask: true,
					icon: 'loading',
				});
				that.$request('toBaseInfo', {
					clueId: that.current
				}, 'get').then(res2 => {
					if (res2.code == 200) {

						uni.$u.toast(`${res2.message}`)
						that.getListData()

					} else {
						that.$refs.uToast.error(`${res2.message}`)
					}

					that.show1 = false
					uni.hideLoading();

				})
			},
			//转战败
			confirm2(e) {
				var that = this
				if (that.remarks == '') {
					uni.$u.toast('备注必填')
					return
				}



				uni.showLoading({
					title: '加载中',
					mask: true,
					icon: 'loading',
				});
				that.$request('defeatClue', {
					clueId: that.current1,
					remarks: that.remarks
				}, 'get').then(res2 => {
					if (res2.code == 200) {

						uni.$u.toast(`${res2.message}`)
						that.getListData()

					} else {
						that.$refs.uToast.error(`${res2.message}`)
					}
					that.show2 = false
					uni.hideLoading();

				})
			},
			getListData() {
				var that = this
				uni.showLoading({
					title: '加载中',
					mask: true,
					icon: 'loading',
				});
				var createDateArrayVal = ''
				if (that.value4 == 0) {
					createDateArrayVal = this.getRecentDay_DateArr(-7).toString()
				} else if (that.value4 == 1) {
					createDateArrayVal = this.getRecentDay_DateArr(-30).toString()
				} else if (that.value4 == 2) {
					createDateArrayVal = this.getRecentDay_DateArr(-60).toString()
				}



				console.log(createDateArrayVal, 'createDateArrayVal')





				that.$request('getClueListByClueType', {
					userCode: uni.getStorageSync('changeUserList').userCode,
					clueStatus: that.titleName,
					typeName: that.value2,
					dateArray: createDateArrayVal
				}, 'get').then(res2 => {
					if (res2.code == 200) {
						that.list = res2.data
						// uni.$u.toast(`${res2.message}`)

						if (res2.data.length == 0) {
							that.show = false
						} else {
							that.show = true
						}
					} else {
						that.$refs.uToast.error(`${res2.message}`)
					}
					uni.hideLoading();
				})
				// that.list.forEach((i, it) => {
				// 	i.chack = false
				// 	if (i.cusId == store.state.userListName.cusId) {
				// 		i.chack = true
				// 		that.current = it
				// 	}
				// })
			},

			callPhone(i) {
				uni.makePhoneCall({
					// 手机号
					phoneNumber: i,
					// 成功回调
					success: (res) => {
						console.log('调用成功!')
					},

					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}

				});
			},
			// 近N天 - new Date()
			getRecentDay_DateArr(n) {
				var dd = new Date();

				dd.setDate(dd.getDate() + n); //获取n天后的日期
				var y = dd.getFullYear();
				var m = dd.getMonth() + 1; //获取当前月份的日期
				m = m < 10 ? ('0' + m) : m
				var d = dd.getDate();
				d = d < 10 ? ('0' + d) : d
				let day = y + '-' + m + '-' + d;
				// var arrDay = []
				// arrDay[1] = this.$getTimeDay()
				// arrDay[0] = day
				return [day, this.getTimeDay()];
			},

			getTimeDay() {
				var date = new Date()
				let y = date.getFullYear()
				let m = date.getMonth() + 1
				m = m < 10 ? ('0' + m) : m
				let d = date.getDate()
				d = d < 10 ? ('0' + d) : d

				return y + '-' + m + '-' + d;

			},
		},


	}
</script>

<style lang="scss" scoped>
	.bg-purple-ii {
		width: 50rpx;
		height: 50rpx;
		margin: 40rpx 10rpx 0 10rpx;

	}

	.bg-purple-ii2 {
		width: 50rpx;
		height: 50rpx;
		margin: 40rpx 10rpx 0 10rpx;
		z-index: 10;

	}

	.bg-purple-ii3 {
		width: 50rpx;
		height: 50rpx;
		margin: 40rpx 20rpx 0 10rpx;
		z-index: 10;

	}

	.page {
		// height: 100%;
		// padding: 20rpx 20rpx;
		// box-sizing: border-box;
		// position: relative;
	}

	.plateN {
		height: 170rpx;
		width: 750rpx;
		line-height: 50rpx;
		box-shadow: 4px 4px 4px #f5f5f5;
		padding: 0 10rpx 0 0;
		box-sizing: border-box;
		margin-bottom: 50rpx;
		display: flex;
		justify-content: space-between;
		position: relative;

		.bg-purple {

			width: 70rpx;
			height: 70rpx;
			background: #6e8ef0;
			border-radius: 4px;
			margin: 35rpx 0 0 35rpx;

			.bg-purple-i {
				width: 60%;
				height: 60%;
				margin-left: 50%;
				margin-top: 50%;
				transform: translate(-50%, -50%);
			}

		}

		.bg-purple-light {
			color: #6d6d6d;
			margin: 20rpx 0 0 30rpx;

		}

		.bg-purple-dark {
			width: 76rpx;
			height: 76rpx;

			.bg-purple-dark-i {
				width: 60%;
				height: 60%;
				margin-left: 50%;
				margin-top: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}

	.plateN-r {
		position: absolute;
		top: 0;
		right: 0;
	}

	.slot-content {
		width: 100%;
	}

	.screen_div {
		width: 660rpx;
		padding: 10rpx 20rpx;
		box-sizing: border-box;


	}

	.screen_div1 {
		width: 750rpx;
		background-color: #f8f8f8;
	}

	.g-title-sx {

		// width: 60rpx;
		// height: 60rpx;
		position: absolute;
		top: 15rpx;
		right: 30rpx;
	}


	.g-title-sx1 {

		width: 60rpx;
		height: 60rpx;
		position: absolute;
		top: 0;
		right: 0;
	}

	/deep/ .u-swipe-action-item {
		width: 750rpx !important;
	}
</style>